<template>
	<div class="body" v-if="Loading">
		<keep-alive>
			<router-view/>
		</keep-alive>
	</div>
	<div class="tabbar">
		<Tabbar/>
	</div>
</template>

<script lang="ts">
	import {defineComponent,provide,onMounted,ref,inject} from 'vue'
	import Tabbar from '../../components/common/TabBar/index.vue'
	
	import {useRouter} from 'vue-router'
	import {useStore} from 'vuex'
	import {getUserData,getList} from '@assets/request/business';
	import { ElLoading } from 'element-plus'	
	export default defineComponent({
		components:{
			Tabbar
		},
		setup(){
			var loading:any=inject('loading')
			console.log(loading)
			loading.close()
			
			var router=useRouter();
			var store=useStore();
			//资源加载状态
			var Loading=ref(false)
			//加载进度
			var percentage=ref(10)
			
			provide('list',[
				{
					name:'首页',
					path:'/Frame/Home',
					icon:'&#xe735;'
				},
				{
					name:'消息',
					path:'/Frame/Message',
					icon:'&#xe64f;'
				},
				{
					name:'购物车',
					path:'/Frame/Carts',
					icon:'&#xe644;'
				},
				{
					name:'我的',
					path:'/Frame/Me',
					icon:'&#xe62f;'
				}
			]);
			onMounted(async ()=>{
				const loading = ElLoading.service({
				    lock: true,
				    text: 'Loading',
				    background: 'rgba(0, 0, 0, 0.7)',
				})
				//获取页面信息
				var token:string=store.getters.getToken;
				//用户基本信息
				var result:any=await getUserData(token)
				if(result.state!=200){
					router.replace({ path:'/' })
				}
				//商品信息
				var List:any=await getList(token,store.getters.getListLen)
				console.log(List)
				store.commit('setList',Array.from(List.data))
				store.commit('setPageData',result)
				setTimeout(()=>{
					Loading.value=true;
					loading.close()
				})
			})
			provide('skip',(url:string)=>{
				loading.cover('跳转中请稍等...')
				//跳转到默认首页
				router.replace({ path:url })
			})
			return{
				Loading,
				percentage
			}
		}
	})
</script>

<style scoped="scoped">
	.tabbar{
		width: 100%;
		max-width:1000px;
		background-color: #ff9000;
		position: fixed;
		height: 7vh;
		left:50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.body{
		width: 100%;
		max-width:1000px;
		margin: auto;
		height: calc(100vh - 7vh);
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

</style>
